<script setup>
import MenuBar from '../components/MenuBar.vue'
import {ref} from "vue";
import {getRankList} from "@/apis/rankList";
import {onMounted} from "vue";

const tableData = ref([
]);
const tableColumns = ref([
  { label: '热点关键词', prop: 'keyword' },
  { label: '热度', prop: 'hot' },
  { label: '出现词频', prop: 'tf' },
]);

onMounted(async ()  =>{
    try {
        const response = await getRankList();
        tableData.value = response.data;
    } catch (e){
        console.error(e)
    }
})
</script>

<template>
  <TopBar />
  <div id="page" >
      <div class="mainDomain">
  <div style="{height: 10%;width:100%;margin-top: 60px;}">
    <MenuBar/>
  </div>
  <div class="hotRecordView">
    <div class="hotRecordTable">
      <div style="{width: 100%;height: 60px;}">
        <el-text :style="{fontSize:'larger',color:'white',position:'absolute',margin: '0 45%',top:'6%'}">热词排行榜</el-text>
      </div>

      <el-scrollbar>
        <el-table :data="tableData" style="width: 100%;height:240px;border-radius: 20px;" >
          <el-table-column align="center" v-for="column in tableColumns" :key="column.prop" :label="column.label" :prop="column.prop"></el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
  </div>
      </div>
  </div>
</template>

<style scoped>
.mainDomain{
    height:100%;
    width:100%;
    position:fixed;
    background-image: url("../assets/login-background.png");
    background-size: 100% 100%;
}
.hotRecordView{
  width: 100%;
  height: 100%;
  /*background-size: 100% 100%;*/
  /*background: url("../assets/background.jpg") no-repeat;*/
  /*background-position: center;*/
}
.hotRecordTable{
  position: relative;
  width:70%;
  height: 60%;
  top:10%;
  left:15%;
}
</style>
